<template>
  <div class="theme-pop">

    <el-drawer title="主题颜色设置" :visible.sync="myDrawer">
      <!-- <div class="select-con">
                <span style="margin-left:15px">主题：</span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div> -->
      <div class="mytable">
        <!-- <el-table :data="tableData" border  style="width: 90%" @row-click="click_fn" highlight-current-row>
                   <el-table-column label="序号" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                    </el-table-column>
                    <el-table-column prop="name"  label="名称"  width="180" align="center"> </el-table-column>
                     <el-table-column label="主体颜色" align="center">
                         <template #default="{row}">
                            <span class="color-span" :style="{backgroundColor:row.color}"></span>
                          </template>
                    </el-table-column>
                </el-table> -->
        <table border="1" cellspacing="0" style="width:100%">
          <thead>
            <tr>
              <th style="width:20%">序号</th>
              <th style="width:40%">名称</th>
              <th style="width:40%">颜色</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tableData" :key="item.name" :class="[{'active':item.name == nowName}]"
              @click="click_fn(item)">
              <td style="width:20%">{{index +1}}</td>
              <td style="width:40%">{{item.name}}</td>
              <td style="width:40%"> <span class="color-span" :style="{backgroundColor:item.color}"></span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="btns">
        <el-button type="success" @click="recommend">推荐</el-button>
        <el-button type="primary" @click="determine">确定</el-button>
      </div>

    </el-drawer>
  </div>
</template>

<script setup>
  export default {
    props: ["drawer"],
    data () {
      return {
        myDrawer: false,
        options: [{
          value: 'kejilan',
          label: 'kejilan'
        },{
          value: '活力紫',
          label: '活力紫'
        },{
          value: '经典黑',
          label: '经典黑'
        },
        {
          value: '天空蓝',
          label: '天空蓝'
        },
        {
          value: '国网绿',
          label: '国网绿'
        }],
        value: '',
        tableData: [
          {
            color: '#368ED9',
            name: 'kejilan'
          },{
            color: '#6284DC',
            name: '活力紫'
          },{
            color: '#57585f',
            name: '经典黑'
          },{
            color: '#4885de',
            name: '天空蓝'
          },{
            color: '#2A8E7C',
            name: '国网绿'
          }
        ],
        nowName: ""
      };
    },
    mounted () {
      this.nowName=localStorage.getItem('themeName')
    },
    watch: {
      drawer (val) {
        this.myDrawer=val
      },
      myDrawer (val) {
        this.$emit('ziZuJian_fn',val)
      }
    },
    methods: {
      determine () {
        var userDetailed=JSON.parse(localStorage.getItem("userDetailed"))
        var skinArr=JSON.parse(localStorage.getItem("skinArr"))
        var index=skinArr.findIndex(item => item.userId==userDetailed.userId)
        skinArr[index].skinName=this.nowName
        localStorage.setItem("skinArr",JSON.stringify(skinArr));

        localStorage.setItem('themeName',this.nowName)
        window.location.reload();
      },
      recommend () {
        this.nowName='kejilan'
      },
      click_fn (row) {
        this.nowName=row.name
      },
    },
  }
</script>

<style lang="scss" scoped>
  :deep(.el-drawer) {
    width: 20% !important;
  }

  .mytable {
    width: 100%;
    padding: 0px 10px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  //  #add5ff
  // #eaf4ff
  td {
    text-align: center;
    height: .36rem;
  }

  th {
    height: .36rem;
  }

  table,
  td,
  th {
    border: 1px solid #ccc;
    border-collapse: collapse;
  }

  tbody tr:hover {
    background-color: #eaf4ff;
  }

  tbody tr.active {
    background-color: #add5ff;
  }

  .btns {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .color-span {
    display: inline-block;
    width: 15px;
    height: 15px;
  }
</style>